<template>
    <van-dialog
        use-slot
        v-model="showcalculator"
        :showConfirmButton="false"
        :showCancelButton="false"
        confirm-button-open-type="getUserInfo"
        bind:close="onClose"
        bind:getuserinfo="getUserInfo"
    >
        <div class="calculatormain">
            <div class="calculator">
                <div class="results">
                    <input class="input" v-model="current_1" :readonly="true" />
                </div>
                <div class="mode">
                    <button class="button" @click="press_1">7</button>
                    <button class="button" @click="press_1">8</button>
                    <button class="button" @click="press_1">9</button>
                </div>
                <div class="mode">
                    <button class="button" @click="press_1">4</button>
                    <button class="button" @click="press_1($event)">5</button>
                    <button class="button" @click="press_1">6</button>
                </div>
                <div class="mode">
                <button class="button" @click="press_1">1</button>
                <button class="button" @click="press_1">2</button>
                <button class="button" @click="press_1">3</button>
                </div>
                <div class="mode">
                <button class="button" @click="press_1">0</button>
                <button class="button" @click="press_1">.</button>
                <button class="button" @click="press_1">+</button>
                </div>
                <div class="mode">
                <button class="button" @click="press_1">-</button>
                <button class="button" @click="press_1">/</button>
                <button class="button" @click="press_1">*</button>
                </div>
                <div class="mode">
                <button class="button" @click="press_1">(</button>
                <button class="button" @click="press_1">)</button>
                <button class="button" @click="press_1">%</button>
                <button class="button" @click="press_1">C</button>
                </div>
            </div>

            <div class="IIFooterBtn">
                <div class="cancel">
                <div class="cancelBtn" @click="closeDialog_1">取 消</div>
                </div>
                <div class="project">
                <div class="projectBtn" @click="showTestInspection">检验项目</div>
                </div>
                <div class="submit">
                <div class="submitBtn" @click="getResult_1">确定</div>
                </div>
            </div>
        </div>
        <van-popup v-model="showProject" get-container="body" position="bottom">
            <van-picker
                title="请选择检验项目"
                :columns="columns4Project"
                show-toolbar
                value-key="fname"
                @cancel="onCancel4Project"
                @confirm="onConfirm4Project"
            />
        </van-popup>
    </van-dialog>
</template>

<script>
import { base_checkitem_search } from "@/api/calculator";
import calculator from "@/components/calculator";
import {
  Button,
  DropdownMenu,
  DropdownItem,
  Icon,
  Toast,
  Dialog,
  Popup,
  Picker
} from "vant";
export default {
    name: "calculator",
    components: {
        [Icon.name]: Icon,
        [Button.name]: Button,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [Toast.name]: Toast,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
        [Dialog.Component.name]: Dialog.Component
    },
    data() {
        return {
            showProject: false,
            columns4Project: [],
            showcalculator: false,
            title: "",
            current_1: "",
            current_2: "",
            selected: {},
            dataVisible: false,
            dialogVisibleFormula: false,
            dialogVisible: false,
            current: "",
            changeMode: true,
            result: {
                success: false,
                result: 0
            },
            result_1: {
                success: false,
                expression: "",
                expressioncaption: ""
            },
            mockData: [
                {
                expression: 100,
                expressioncaption: "一"
                },
                {
                expression: 200,
                expressioncaption: "二"
                },
                {
                expression: 300,
                expressioncaption: "三"
                }
            ]
        };
    },
    props: {
        fcheckitemid: {
            type: String,
            default: ""
        },
        propsfid1: {
            type: String,
            default: ""
        },
        propsfid2: {
            type: String,
            default: ""
        }
    },
    created() {},
    methods: {
        onCancel4Project() {
            this.showProject = false
        },
        onConfirm4Project(baseCheckSelections) {
            console.log(baseCheckSelections)
            this.selected = baseCheckSelections;
            this.current_1 += "[" + baseCheckSelections.fname + "]";
            this.current_2 += "[" + baseCheckSelections.fid + "]";
            if (this.isBanlanced(this.current_1)) {
                (this.result_1.success = true),
                (this.result_1.expression = this.current_2);
                this.result_1.expressioncaption = this.current_1;
            } else {
                (this.result_1.success = false),
                (this.result_1.expression = this.current_2);
                this.result_1.expressioncaption = this.current_1;
                Toast.fail("请输入正确表达式");
            }
            this.showProject = false
        },
        handleCurrentChange(row) {
            if (row) {
                this.selected = row;
                this.dataVisible = false;
                this.current_1 += "[" + row.expressioncaption + "]";
                this.current_2 += "[" + row.expression + "]";
                if (this.isBanlanced(this.current_1)) {
                (this.result_1.success = true),
                    (this.result_1.expression = this.current_2);
                this.result_1.expressioncaption = this.current_1;
                } else {
                (this.result_1.success = false),
                    (this.result_1.expression = this.current_2);
                this.result_1.expressioncaption = this.current_1;
            Toast.fail("请输入正确表达式");
                }
            }
        },
        getArg() {
            return this.propsfid1;
        },
        showTestInspection() {
            base_checkitem_search({
                fmoduleid: "base_checkitemv2",
                searchvalue: "",
                pagesize: 20,
                pagenumber: 1,
                fuserid: "3fd6ff5c-dc5f-493a-9239-570c83f569f6",
                fcondition:
                "and  fid in (select fcheckitemid from base_checkstandarddtlv2 where fid = " +
                "'" +
                this.propsfid1 +
                "'" +
                ") or fid = " +
                "'" +
                this.fcheckitemid +
                "'"
            }).then(res => {
                this.columns4Project = res.rows
                this.showProject = true
                console.log(res);
            });

        },

        handleClose(done) {
            this.current = "";
            this.$emit("handleClose");
            done();
        },
        closeDialog() {
            this.current = "";
            this.$emit("handleClose");
        },
        closeDialog_1() {
            this.showcalculator = false;
            this.current_1 = "";
        },
        getResult() {
            this.current = "";
            this.$emit("handleClose");
        },
        getResult_1() {
            if (this.isbrackets(this.current_1)) {
                if (this.lastStr(this.current_1)) {
                    if (this.isBanlanced(this.current_1)) {
                        if (this.isSymbols(this.current_1)) {
                            (this.result_1.success = true),
                            (this.result_1.expression = this.current_2);
                            this.result_1.expressioncaption = this.current_1;
                            this.$emit("handleClose_1");
                            this.current_1 = "";
                            this.current_2 = "";
                            this.showcalculator = false
                        } else {
                            Toast.fail("请输入正确表达式");
                        }
                    } else {
                        (this.result_1.success = false),
                        (this.result_1.expression = this.current_2);
                        this.result_1.expressioncaption = this.current_1;
                        Toast.fail("请输入正确表达式");
                    }
                } else {
                    Toast.fail("请输入正确表达式");
                }
            } else {
                Toast.fail("请输入正确表达式");
            }
        },
        press: function(event) {
            const me = this;
            const key = event.target.textContent;
            if (
                key != "=" &&
                key != "C" &&
                key != "*" &&
                key != "/" &&
                key != "√" &&
                key != "x 2" &&
                key != "%" &&
                key != "<=" &&
                key != "±" &&
                key != "sin" &&
                key != "cos" &&
                key != "tan" &&
                key != "log" &&
                key != "ln" &&
                key != "x^" &&
                key != "x !" &&
                key != "π" &&
                key != "e" &&
                key != "rad" &&
                key != "°"
            ) {
                me.current += key;
            } else if (key === "=") {
                try {
                me.current = eval(me.current)
                    .toString()
                    .substring(0, 16);
                me.result.result = Number(me.current.substring(0, 16));
                me.result.success = true;
                } catch (err) {
                me.result.result = me.current;
                me.result.success = false;
                me.$message({
                    message: "请输入正确表达式",
                    type: "warning"
                });
                }
            } else if (key === "C") {
                me.current = "";
            } else if (key === "*") {
                me.current += "*";
            } else if (key === "/") {
                me.current += "/";
            } else if (key === "+") {
                me.current += "+";
            } else if (key === "-") {
                me.current += "-";
            } else if (key === "±") {
                if (me.current.charAt(0) === "-") {
                me.current = me.current.slice(1);
                } else {
                me.current = "-" + me.current;
                }
            } else if (key === "<=") {
                me.current = me.current.substring(0, me.current.length - 1);
            } else if (key === "%") {
                me.current = me.current / 100;
            } else if (key === "π") {
                me.current = me.current * Math.PI;
            } else if (key === "x 2") {
                me.current = eval(me.current * me.current);
            } else if (key === "√") {
                me.current = Math.sqrt(me.current);
            } else if (key === "sin") {
                me.current = Math.sin(me.current);
            } else if (key === "cos") {
                me.current = Math.cos(me.current);
            } else if (key === "tan") {
                me.current = Math.tan(me.current);
            } else if (key === "log") {
                me.current = Math.log10(me.current);
            } else if (key === "ln") {
                me.current = Math.log(me.current);
            } else if (key === "x^") {
                me.current += "^";
            } else if (key === "x !") {
                const number = 1;
                if (me.current === 0) {
                me.current = "1";
                } else if (me.current < 0) {
                me.current = NaN;
                } else {
                let number = 1;
                for (let i = me.current; i > 0; i--) {
                    number *= i;
                }
                me.current = number;
                }
            } else if (key === "e") {
                me.current = Math.exp(me.current);
            } else if (key === "rad") {
                me.current = me.current * (Math.PI / 180);
            } else if (key === "°") {
                me.current = me.current * (180 / Math.PI);
            }
        },
        // 判断方括号前后是否有计算符号
        isSymbols(str) {
            // 排除'['首位 和 ']' 末位
            if (str.indexOf("[") == 0 && str.indexOf() == str.lenght) {
                return true;
            } else {
                if (
                str[str.indexOf("[") - 1] !== "+" &&
                str[str.indexOf("[") - 1] !== "-" &&
                str[str.indexOf("[") - 1] !== "*" &&
                str[str.indexOf("[") - 1] !== "/" &&
                str[str.indexOf("[") - 1] !== "(" &&
                str[str.indexOf("[") - 1] !== "%" &&
                str[str.indexOf("]") + 1] !== "%" &&
                str[str.indexOf("]") + 1] !== ")" &&
                str[str.indexOf("]") + 1] !== "+" &&
                str[str.indexOf("]") + 1] !== "-" &&
                str[str.indexOf("]") + 1] !== "/" &&
                str[str.indexOf("]") + 1] !== "*"
                ) {
                return false;
                } else {
                return true;
                }
            }
        },
        press_1(event) {
            const me = this;
            const key = event.target.textContent;
            // console.log(key)
            if (
                key != "C" &&
                key != "*" &&
                key != "/" &&
                key != "√" &&
                key != "x 2"
            ) {
                me.current_1 += key;
                me.current_2 += key;
            } else if (key === "=") {
                me.current_1 += "=";
                me.current_2 += "=";
            } else if (key === "C") {
                me.current_1 = "";
                me.current_2 = "";
            } else if (key === "*") {
                me.current_1 += "*";
                me.current_2 += "*";
            } else if (key === "/") {
                me.current_1 += "/";
                me.current_2 += "/";
            } else if (key === "+") {
                me.current_1 += "+";
                me.current_2 += "+";
            } else if (key === "-") {
                me.current_1 += "-";
                me.current_2 += "-";
            }
        },
        // 判断是否选取项目
        isbrackets(str) {
            if (str.indexOf("[") == -1) {
                return false;
            } else {
                return true;
            }
        },
        // 判断括号是否闭合
        isBanlanced(str) {
            const arr = [...str];
            let stack = [];

            for (let i = 0; i < arr.length; ++i) {
                if (arr[i] == "(") {
                stack.push(")");
                } else if (arr[i] == ")") {
                if (stack.length === 0) {
                    return false;
                }
                // console.log(arr[i], stack)
                stack.pop();
                }
            }
            return stack.length === 0;
        },
        lastStr(str) {
            const last = str.charAt(str.length - 1);
            if (last == "+") {
                return false;
            } else if (last == "-") {
                return false;
            } else if (last == "*") {
                return false;
            } else if (last == "/") {
                return false;
            } else {
                return true;
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
}
.cancelBtn {
  font-size: 14px;
  background: #ff976a;
  margin: 0 auto;
  width: 70%;
  height: 30px;
  line-height: 30px;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.project {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
}
.projectBtn {
  font-size: 14px;
  background: #03a9f4;
  margin: 0 auto;
  width: 70%;
  height: 30px;
  line-height: 30px;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
}
.submitBtn {
  font-size: 14px;
  background: #07c160;
  margin: 0 auto;
  width: 70%;
  height: 30px;
  line-height: 30px;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.IIFooterBtn {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  color: white;
  display: flex;
}
.calculatormain {
  margin-bottom: 40px;
}
.calculator {
  width: 100%;
  border-radius: 5px;
  font-size: 16px;
  background-color: #333333;
}
.input {
  width: 90%;
  height: 40px;
  border-radius: 0px;
  border: 1px solid black;
  background-color: #1a1a1a;
  color: white;
  margin: 10px auto;
  font-size: 20px !important;
  text-align: left;
}
.input:focus,
.input:active {
  border-color: #03a9f4;
  box-shadow: 0 0 4px #03a9f4;
  outline: none 0;
}
.button {
  padding: 10px;
  margin: 3px 0 3px 0;
  min-width: 70px;
  max-width: 100px;
  border: 1px solid #0d0d0d;

  border-radius: 4px;
  color: white;
  background-color: #1a1a1a;
  cursor: pointer;
  font-size: 20px !important;
  outline: none;
}
.button_1 {
  margin: 3px;
  min-width: 90px;
  height: 30px;
  background-color: #333333;
}
.mode {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.greenColor {
  background-color: green;
}
.equal-sign {
  background-color: green;
  min-width: 50px;
  max-width: 100px;
}
.toggle-button {
  border: none;
  background-color: #333333;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
  color: #fff;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35);
}
</style>
